<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-select class="filter-item" style="width: 130px" @change="getList" v-model="listQuery.type" placeholder="所有类型">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <span class="search-title">选择孕周</span>
      <el-select @change="change_choose_b" class="select-down" v-model="choose_b" placeholder="开始孕周">
        <el-option
          v-for="(item) in week_b"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>-
      <el-select :disabled="is_choose_b" class="select-down" @change="endWeek" v-model="choose_e" placeholder="结束孕周">
        <el-option
          v-for="item in week_e"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled">
        </el-option>
      </el-select>
      <div class="partner-search">
        <el-input @keyup.enter.native="searchList" @blur="searchList" v-model="keyword" placeholder="请输入tips关键词"></el-input>
        <i class="el-icon-search"></i>
      </div>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%" max-height="580">
      <el-table-column width="150" align="center" label="类型">
        <template slot-scope="scope">
          <span>{{scope.row.type_name}}</span>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="年龄/孕周">
        <template slot-scope="scope">
          <span>{{scope.row.pregnancy_week}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="300" label="tips">
        <template slot-scope="scope">
          <span v-if="scope.row.tips">{{scope.row.tips}}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200" label="身高/顶臀长">
        <template slot-scope="scope">
          <span v-if="scope.row.weight">{{scope.row.weight}}</span>
          <span v-else>0</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="体重" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.height}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="view" size="mini" @click="handleView(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
        :page-sizes="[5,10,20,30,50]" :page-size="listQuery['per-page']" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>
<style scoped>
  .el-dialog {
    width: 40%!important;
  }
    .el-time-spinner__wrapper {
    vertical-align: inherit;
  }
  .filter-container .filter-item {
    margin-bottom: 4px;
  }
  .el-input {
    width: 200px;
  }
  .partner-search {
    width: 20%;
    float: right;
    margin-right: 50px;
    position: relative;
  }
   .partner-search i {
    position: absolute;
    top: 30%;
    left: 5px;
    color: rgb(228,229,233);
  }
  .el-input>>> input {
    width: 220px;
    padding: 0 20px;
    text-indent: 10px!important;
  }
  .select-down >>> .el-input {
    width: 150px;
    margin: 0 10px;
  }
</style>

<script>
import { tipsList } from '@/api/tips'
import waves from '@/directive/waves' // 水波纹指令
import { parseTime } from '@/utils'

export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      value1: '',
      value2: '',
      keyword: '',
      is_choose_b: true,
      listQuery: {
        type: null,
        key_word: '',
        week_S: '',
        week_E: '',
        page: 1,
        'per-page': 10
      },
      choose_b: '',
      choose_e: '',
      week_b: [],
      week_e: [],
      temp: {
        id: undefined,
        username: '',
        account: '',
        phone: '',
        status: '',
        created_at: '',
        auth_key: ''
      },
      statusOptions: [{
        value: null,
        label: '所有类型'
      }, {
        value: 0,
        label: '孕期'
      }],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改成员信息',
        create: '新增成员'
      },
      downloadLoading: false
    }
  },
  created() {
    this.getList()
    for (let i = 0; i <= 40; i++) {
      this.$set(this.week_b, i, {
        label: i + '周',
        value: i
      })
      this.$set(this.week_e, i, {
        label: i + '周',
        disabled: false,
        value: i
      })
    }
  },
  methods: {
    statusArr(value) {
      const arr = {
        0: '请选择',
        1: '生效',
        3: '冻结',
        10: '无效用户'
      }
      return arr[value]
    },
    getList() {
      this.listLoading = true
      tipsList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data._meta.totalCount
        this.listLoading = false
      })
    },
    change_choose_b() {
      if (this.choose_b || this.choose_b === 0) {
        this.is_choose_b = false
      }
      for (let i = 0; i <= 40; i++) {
        this.$set(this.week_e, i, {
          label: i + '周',
          disabled: false,
          value: i
        })
      }
      for (let i = 0; i < this.choose_b; i++) {
        this.$set(this.week_e, i, {
          label: i + '周',
          disabled: true,
          value: i
        })
      }
      this.choose_e = '结束孕周'
    },
    endWeek() {
      this.listQuery.week_S = this.choose_b
      this.listQuery.week_E = this.choose_e
      this.getList()
    },
    searchList() {
      this.listQuery.key_word = this.keyword
      this.getList()
    },
    userValue() {
      this.temp.account = this.temp.account.replace(/[^\d\w_]/ig, '')
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery['per-page'] = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        account: '',
        username: '',
        phone: '',
        password: '',
        status: ''
      }
    },
    // 查看成员信息详情
    handleView(row) {
      this.$router.push({ path: '/science/tip-edit/' + row.id })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>
